<template>
  <el-main>
    <h1>用户管理</h1>
    <div style="margin: 0.5rem">🐖</div>
    <div class="admin">
      <!-- 添加管理员 -->
      <Visible
        v-model="addVisible"
        title="添加管理员"
        @success="addAdmin"
        :initValues="newValues"
      ></Visible>
      <!-- 修改管理员信息 -->
      <Visible
        v-model="editVisible"
        title="修改管理员信息"
        @success="alterAdmin"
        :initValues="editValues"
      ></Visible>
      <el-row>
        <el-col :span="1" :offset="0" style="margin-bottom: 1em">
          <el-button
            type="success"
            size="medium"
            @click="showAdd"
            :disabled="user.superuser == 0"
            >添加管理员</el-button
          >
        </el-col>
      </el-row>
      <el-table
        :data="
          admin.filter(
            (data) =>
              !search ||
              data.username.toLowerCase().includes(search.toLowerCase())
          )
        "
      >
        <el-table-column prop="id" label="id" width="100" />
        <el-table-column prop="username" label="Name" />
        <el-table-column label="级别">
          <template #default="scope">{{
            scope.row.superuser == 0 ? "普通管理员" : "超级管理员"
          }}</template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template #default="scope">{{
            dateFormat(scope.row.created_at)
          }}</template>
        </el-table-column>
        <el-table-column align="center">
          <template #header>
            <el-input
              v-model="search"
              size="mini"
              :suffix-icon="Search"
              placeholder="查找管理员"
            />
          </template>
          <template #default="scope">
            <el-button
              type="primary"
              @click="update(scope.row)"
              :disabled="user.id == scope.row.id || user.superuser == 0"
              >修改</el-button
            >
            <el-popconfirm
              title="删除的管理员将无法恢复，你确定要删除吗?"
              @confirm="deleteAdmin(scope.row)"
            >
              <template #reference>
                <el-button
                  type="danger"
                  :disabled="user.id == scope.row.id || user.superuser == 0"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-main>
</template>
<script>
import { onBeforeMount, reactive, ref } from "vue";
import {
  adminRenderApi,
  delAdminApi,
  addAdminApi,
  editAdminInfoApi,
  infoApi,
} from "@/api/admin";
import dayjs from "dayjs";
import Visible from "./Visible.vue";
import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";

export default {
  components: {
    Visible,
  },
  setup() {
    const dateFormat = (time) => {
      return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
    };
    const newValues = {
      username: "",
      password: "",
      superuser: "0",
    };
    const admin = ref([]),
      addVisible = ref(false),
      editVisible = ref(false),
      editValues = reactive({}),
      search = ref(""),
      user = reactive({});
    // 添加管理员
    const showAdd = () => {
      addVisible.value = true;
    };
    const addAdmin = (values) => {
      addAdminApi(values).then((res) => {
        if (res.data.success) {
          admin.value.push(res.data.rs);
          addVisible.value = false;
          ElMessage.success("添加管理员成功!");
        } else {
          ElMessage.error(`${res.data.message}`);
        }
      });
    };
    // 修改管理员信息
    const update = async (values) => {
      Object.assign(editValues, values);
      editVisible.value = true;
    };
    const alterAdmin = (values) => {
      editAdminInfoApi(values).then((res) => {
        if (res.data.success) {
          ElMessage.success(`${res.data.message}`);
          editVisible.value = false;
          admin.value = admin.value.map((item) => {
            return item.id == values.id ? values : item;
          });
        }
      });
    };
    // 删除管理员
    const deleteAdmin = (data) => {
      delAdminApi(data.id).then((res) => {
        if (res.data.success) {
          console.log(admin);
          ElMessage.success("删除管理员成功!");
          admin.value = admin.value.filter((item) => {
            return item.id !== data.id;
          });
        }
      });
    };
    // 显示所有管理员的信息
    onBeforeMount(() => {
      infoApi().then((res) => {
        if (res.data.success) {
          Object.assign(user, res.data.user);
        }
      });
      adminRenderApi().then((res) => {
        admin.value = res.data.query;
        console.log(admin);
      });
    });
    return {
      admin,
      deleteAdmin,
      newValues,
      addVisible,
      editVisible,
      editValues,
      addAdmin,
      showAdd,
      update,
      alterAdmin,
      dateFormat,
      Search,
      search,
      user,
    };
  },
};
</script>
<style scoped>
.box {
  width: 90%;
  overflow-y: hidden;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  margin: auto;
  margin-top: 20px;
  border-radius: 4px;
  min-height: 36px;
  padding: 20px;
}
.admin {
  padding: 10px;
}
.el-main {
  border-radius: 10px;
  background-color: #fff;
  min-height: 100vh;
}
</style>
<style>
@media screen and (max-width: 600px) {
  .el-dialog {
    margin: 0px;
    width: 100%;
  }
}
</style>
